<!-- 服务包详情主页------------------------- -->
<template>
	<view class="service-pack-detail">
		<view class="header">
			<image class="back-icon" style="width: 375px; height: 291px;" :src="servicePackageData.image"></image>
		</view>

		<view class="title-wrap">
			<text class="title">{{ servicePackageData?.name  }}</text>
			<text class="price">¥{{ servicePackageData?.price  }}</text>
		</view>
		<view class="info-item">
			<!-- <navigator :url="`/homepackge/pages/Teamhomepage/Teamhomepage?orgId=${organizationData._id}`"> -->
			<navigator :url="`/homepackge/pages/organizationalPage/organizationalPage?orgId=${organizationData._id}`">
				<view class="address">
					<text class="label">所属机构：</text>
					<text class="value">{{organizationData.name}}</text>
					<image class="arrow-icon" src="/static/arrow-right.png" alt="箭头"></image>
				</view>
			</navigator>
		</view>

		<view class="info-item">
			<navigator :url="`/homepackge/pages/Teamhomepage/Teamhomepage?teamId=${teamData._id}`">
				<view class="address">
					<text class="label">所属团队：</text>
					<text class="value">{{teamData.name}}</text>
					<image class="arrow-icon" src="/static/arrow-right.png" alt="箭头"></image>
				</view>
			</navigator>
		</view>
		<!-- 标签 -->
		<view class="tags">
			<text class="tag tag1" v-for="tag in servicePackageData?.tagIds" :key="tag._id">
				{{ tag.name?tag.name:"在暂无" }}
			</text>
		</view>
		<view class="section">
			<view class="section-title">服务对象</view>
			<text class="intro-content">
				{{ servicePackageData?.client  }}
			</text>
		</view>

		<view class="section">
			<view class="section-title">服务介绍</view>
			<text class="intro-content">
				{{ servicePackageData?.intro  }}
			</text>
		</view>

		<view class="section">
			<view class="section-title" style="border-bottom: none;">服务项目</view>
			<view class="table">
				<view class="table-row">
					<!-- <view class="table-cell">项目名称</view>
					<view class="table-cell table-count" style="color: #2984F8;">次数</view> -->
				</view>
				<view class="table-row" v-for="(item, index) in servicePackageData?.serviceItemIds" :key="item._id">
					<view class="table-cell">{{ item?.name }}</view>
					<view class="table-cell table-count">{{ item?.count }}次</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="section-title">服务周期</view>
			<text class="intro-content">
				{{ servicePackageData?.period }}
				<template v-if="servicePackageData?.renew === 1">（支持续签）</template>
			</text>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getServicePackageDetailApi
	} from '../../../api/organizations';
	import {
		ref
	} from 'vue';
	import {
		organizationsDetailApi
	} from '../../../api/nearbyLnstitutions';
	import {
		getDoctorDetailApi
	} from '../../../api/doctor';

	// 服务包详情数据
	const servicePackageData = ref({});
	// 保存接收的服务包ID
	const servicePackIds = ref('');
	// 机构数据
	const organizationData = ref({});
	const orgId = ref('');
	// 团队数据
	const teamData = ref({});
	const teamId = ref('');

	onLoad((options) => {
		console.log('服务包详情页接收的参数：', options);
		// 接收并保存_id
		if (options._id) {
			servicePackIds.value = options._id;
			orgId.value = options.orgId;
			teamId.value = options.teamId;
			// console.log('成功接收服务包ID：', servicePackIds.value);
			getServicePackageDetail(servicePackIds.value);
			// 获取机构详情
			if (orgId.value) {
				getOrganizationDetail(orgId.value);
			}

			// 获取团队详情
			if (teamId.value) {
				getTeamDetail(teamId.value);
			}
		} else {
			console.error('服务包详情页未接收到_id参数！');
		}
	});

	// 获取服务包详情
	const getServicePackageDetail = (id) => {
		getServicePackageDetailApi({
			_id: id
		}).then(res => {
			if (res.code === 200) {
				console.log('服务包详情数据：', res.data);
				servicePackageData.value = res.data;
			} else {
				console.error('获取服务包详情失败：', res.message);
			}
		}).catch(err => {
			console.error('获取服务包详情接口异常：', err);
		});
	};
	// 获取机构详情
	const getOrganizationDetail = (id) => {
		organizationsDetailApi({
			_id: id
		}).then(res => {
			if (res.code === 200) {
				console.log('机构详情数据：', res.data);
				organizationData.value = res.data;
			}
		}).catch(err => {
			console.error('获取机构详情失败：', err);
		});
	};

	// 获取团队详情
	const getTeamDetail = (id) => {
		getDoctorDetailApi({
			_id: id
		}).then(res => {
			if (res.code === 200) {
				console.log('团队详情数据：', res.data);
				teamData.value = res.data;
			}
		}).catch(err => {
			console.error('获取团队详情失败：', err);
		});
	};
</script>
<style scoped lang="scss">
	.service-pack-detail {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		padding: 32rpx;
		background-color: white;
	}

	.back-icon {
		width: 750rpx;
		height: 582rpx;
	}

	.title-wrap {
		// padding: 32rpx;
		background-color: white;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
	}

	.price {
		font-size: 36rpx;
		color: #ff5722;
		font-weight: bold;
	}

	.info-item {
		background-color: white;
		margin-bottom: 20rpx;
	}

	.address {
		display: flex;
		align-items: center;
		padding: 32rpx;
		justify-content: space-between;
	}

	.label {
		color: #666;
	}

	.value {
		flex: 1;
		margin: 0 20rpx;
		color: #666;
	}

	.arrow-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.tags {
		padding: 32rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		display: flex;
		gap: 20rpx;
		flex-wrap: wrap;
	}

	.tag {
		padding: 8rpx 32rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		background-color: #3DD4A733;
	}


	.section {
		background-color: white;
		margin-bottom: 20rpx;
		padding: 32rpx;
	}

	.section-title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
		color: #333;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #eee;
	}

	.intro-content {
		color: #666;
		line-height: 1.6;
	}

	.table {
		width: 100%;
	}

	.table-row {
		display: flex;
		border-bottom: 2rpx solid #eee;
	}

	.table-cell {
		flex: 3;
		padding: 24rpx 0;
		color: #666;
	}

	.table-count {
		flex: 1;
		text-align: center;
		color: #2984F8;
	}

	.table-row:first-child .table-cell {
		font-weight: bold;
		color: #333;
	}




	.service-pack-detail {
		padding: 16rpx;
		background-color: #fff;
		min-height: 100vh;
	}

	.header {
		padding: 20rpx 0;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.title-wrap {
		margin: 30rpx 0;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.price {
		color: #f00;
		font-size: 32rpx;
		margin-left: 20rpx;
	}
</style>